<template>
	<view class="content" v-if="Object.keys(userInfo).length > 0">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		
		<view class="baibox">
			<view class="baili" @click="$go( '/pages/my/my?id=' + uid)">
				<view class="zhan1">
					
					<image class="art" :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view class="bnt">
						{{userInfo.nickname}}
					</view>
						
						
					<image :src="$options.filters.formatImgUrl(userInfo.writer_level&&userInfo.writer_level.is_active?userInfo.writer_level.level.image:userInfo.writer_level.level.hide_img)"
							@click.stop="$go('/pages/user/grade?uid='+userInfo.membe_id)"
							class="jipic" mode="" v-if="userInfo.is_writer">
					</image>
						
					<image
						:src="$options.filters.formatImgUrl(userInfo.user_level&&userInfo.user_level.is_active?userInfo.user_level.level.image:userInfo.user_level.level.hide_img)"
						class="biepic" mode="" v-if="userInfo.is_vip"></image>
						
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			<!-- <view class="baili no_border"  @click="$go('/pages/tim/create_group')">
				<view class="zhan1">
					<image class="art" :src="'/images/jia1.png' | formatImgUrl" mode=""></image>
					<view class="bnt" style="width: 200px;">
						发起群聊
					</view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view> -->
			
		</view>
		
		<!-- <view class="baibox">
			<view class="baili" style="height: 100rpx;" @click="show=true">
				<view class="zhan">
					好友备注 
				</view>
				<view class="right">
					{{userInfo.username}}
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
		</view> -->
		
		<view class="baibox baibox-n">
			<view class="baili" >
				<view class="zhan">
					屏蔽该用户
					<view class="bnt">
						不再接收该用户发送的信息且不再推送此用户发布的内容
					</view>
				</view>
				<u-switch v-model="userInfo.ping" :inactiveValue="0"
					:activeValue="1" inactiveColor="#888EB6" size="20" activeColor="#7BF0D9"
					@change="saveWriterUserConfig"></u-switch>
			</view>
			<view class="baili" style="border-radius: 0;">
				<view class="zhan">
					<view class="">
						置顶该用户
					</view>
					<view class="bnt">
						开启后用户的信息将在聊天列表里置顶展示
					</view>
				</view>
				<u-switch v-model="userInfo.isPinned" :inactiveValue="0"
					:activeValue="1" inactiveColor="#888EB6" size="20" activeColor="#7BF0D9"  @change='changeTop'
					></u-switch>
			</view>
			<view class="baili">
				<view class="zhan">
					<view class="">
						设为免打扰
					</view>
					<view class="bnt">
						开启后用户的信息将不再提醒您
					</view>
				</view>
				<u-switch v-model="userInfo.isMuted" :inactiveValue="0" @change='changeMute'
					:activeValue="1" inactiveColor="#888EB6" size="20" activeColor="#7BF0D9"
					></u-switch>
			</view>
		</view>
		<!-- <view class="baibox">
			<view class="baili" style="height: 100rpx;" @click="del_msg()">
				<view class="zhan">
					删除好友
				</view>
			</view>
		</view> -->
		<view class="ti" @click="submit()">
			被骚扰了？举报该用户
		</view>
		
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="mask">
				<view class="jatitle">
					备注名称
				</view>
				<input type="text" class="japut" maxlength="15" placeholder="请输入备注"
					v-model="userInfo.username">
			
				<view class="qubox">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="que" @click="setting">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <view class="ti" @click="submit(true)">
			保存
		</view> -->
		
		<u-popup mode="center" :show="showConfirm" @close="showConfirm=false">
			<view class="mask" style="padding-left: 0;padding-right: 0;padding-bottom: 0;">
				<view class="matitle">
					<text>是否确认屏蔽该用户</text>
				</view>
				<view class="matxt">
					屏蔽后将无法继续跟其沟通、查看对方主页
				</view>
				<view class="quque">
					<view class="quli" @click="userInfo.ping=0,showConfirm = false">
						取消
					</view>
					<view class="quli quactive" @click="pingbi">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
	  TUIStore,
	  TUIUserService
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				type:0,
				// 字数
				array: this.$db.get('config').word_count_label,
				index: 0,
				// 开关
				value: false,
				// 弹框
				show: false,
				userInfo: {},
				uid:0,
				showConfirm: false
			}
		},
		onLoad(ops) {
			this.uid = ops.id;
			this.getUserInfo()
		},

		onShow() {
			if(this.uid){
				this.getUserInfo()
			}
			
		},
		methods: {
			// 免打扰
			changeMute(e){
				this.$api.default.request('user/saveFriendRole', {
					id: this.uid,
					isPinned: this.userInfo.isPinned,
					isMuted: e
				}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg, () => {
							this.getUserInfo()
							let currentConversation = TUIStore.getConversationModel(
							  'C2C' + this.uid
							);
							
							let promise = currentConversation.muteConversation();
						})
					}
				})
				
			},
			// 置顶
			changeTop(e){
				this.$api.default.request('user/saveFriendRole', {
					id: this.uid,
					isPinned: e,
					isMuted: this.userInfo.isMuted
				}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg, () => {
							this.getUserInfo()
							let currentConversation = TUIStore.getConversationModel(
							  'C2C' + this.uid
							);
							
							let promise = currentConversation.pinConversation();
						})
					}
				})
				
				
			},
			del_msg() {
				
				this.show = false
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否确定删除该会话',
					success: function(res) {
						if (res.confirm) {
								//删除会话
								_this.$api.default.request('user/delmsg', {
									uid: _this.uid,
								}).then((res) => {
									if (res.code) {
											
										_this.$common.errorToShow(res.msg);
										setTimeout(function(){
											uni.reLaunch({
												url:"/pages/tim/record"
											});
										}, 500); 
									}
								})
						
						} else if (res.cancel) {
							
						}
					}
				})
			
			},
			saveWriterUserConfig(e) {
				console.log(e);
				
				if(e == 1){
					this.showConfirm = true
				}else {
					this.$api.default.request('user/user_friend_yichu_back1', {id:this.uid}).then((res) => {
						if (res.code == 1) {
							this.getUserInfo()
							// this.$common.successToShow(res.msg,()=>{
								
							// })
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				}
				
				// var _this = this;
				// _this.$api.default.request('user/black_c', {
				// 	uid: _this.uid,
				// }).then((res) => {
				// 	if (res.code) {
							
				// 		_this.$common.errorToShow(res.msg);
				// 		// setTimeout(function(){
				// 		// 	uni.reLaunch({
				// 		// 		url:"/pages/tim/record"
				// 		// 	});
				// 		// }, 500); 
				// 	}
				// })
				
			// 	var that = this
			// 	var prams = {
			// 		order_receiving_status: this.userInfo.writer_user_config.order_receiving_status
			// 	}
			// 	if (!this.userInfo.writer_user_config.hasOwnProperty('uid')) {
			// 		prams['uid'] = this.userInfo.writer_user_config.uid
			// 	}
				
			// 	if (!this.userInfo.writer_user_config.word_price) {
			// 		this.$common.errorToShow('未设置价格',()=>{
			// 			this.userInfo.writer_user_config.order_receiving_status = 0
			// 		},1000)
			// 		return
			// 	}
			// 	if (Array.isArray(this.userInfo.writer_diy_tags) && this.userInfo.writer_diy_tags.length === 0) {
			// 		this.$common.errorToShow('未设置标签')
			// 		return
			// 	}
			
			// 	this.$api.default.request('good/list', {
			// 		page: 1
			// 	}).then((res) => {
			// 		if (res.code) {
			// 			if (res.data.total) {
			// 				that.$api.default.request('user/saveWriterUserConfig', prams, 'POST', false).then((
			// 					res) => {
			// 						if (res.code == 1) {
			// 							console.log(res.msg)
			// 						} else {
			// 							that.$common.errorToShow(res.msg, () => {
			// 								that.userInfo.writer_user_config.order_receiving_status = 0
			// 							})
			// 						}
			// 					})
			// 			} else {
			// 				that.$common.errorToShow('请先上传橱窗商品', () => {
			// 					that.userInfo.writer_user_config.order_receiving_status = 0
			// 				})
			
			// 			}
			// 		}
			// 	})
			},
			pingbi(){
				this.$api.default.request('user/no_like_user', {id:this.uid}).then((res) => {
					if (res.code == 1) {
						this.getUserInfo()
						
						this.showConfirm = false
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			setdata(type){
				this.type = type;
				this.show= true;
			},
			setting() {
				// if(!this.userInfo.username){
				// 	this.show = false
				// 	return
				// }
				
				var that = this
				var prams = {
					username: this.userInfo.username,
					id:this.userInfo.membe_id
				}

				// if (!prams['username']) {
				// 	this.$common.errorToShow('请输入备注', () => {
						
				// 	}, 1000)
				// 	return
				// }

				this.$api.default.request('user/saveUserbeizhu', prams).then((res) => {
					if (res.code == 1) {
						that.$common.successToShow(res.msg, () => {
							that.show = false
							
							let currentConversation = TUIStore.getConversationModel(
							  'C2C' + this.uid
							);
							
							let promise = currentConversation.getShowName();
							let promise2 = currentConversation.getAvatar();
						})
					}
				})

			},
			submit(show = false) {
				
				uni.navigateTo({
					url: '/pages/find/report?id=' + this.userInfo.membe_id+"&type=88" + '&newtype=2'
				})
				return;
				
				var that = this
				var prams = {
					order_receiving_status: this.userInfo.writer_user_config.order_receiving_status,
				}

				if (!this.userInfo.writer_user_config.hasOwnProperty('uid')) {
					prams['uid'] = this.userInfo.writer_user_config.uid
				}

				this.$api.default.request('good/list', {
					page: 1
				}).then((res) => {
					if (res.code) {
						if (res.data.total) {
							that.$api.default.request('user/saveWriterUserConfig', prams).then((res) => {
								if (res.code == 1) {
									that.$common.successToShow(res.msg, () => {
										if (show) {
											uni.navigateBack()
										}
									})
								} else {
									that.$common.errorToShow(res.msg, () => {
										that.userInfo.writer_user_config.order_receiving_status = 0
									})
								}
							})
						} else {
							that.$common.errorToShow('请先上传橱窗商品', () => {
								that.userInfo.writer_user_config.order_receiving_status = 0
							})
						}
					}
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo_friend', {uid:this.uid}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user

						// this.userInfo.writer_user_config.word_count = this.userInfo.writer_user_config.word_count ?
						// 	this.userInfo.writer_user_config.word_count : this.array[0]
						// this.array.forEach((item, index) => {
						// 	if (res.user.writer_user_config.word_count == item) {
						// 		this.index = index
						// 	}
						// })
					}
				})
				
				let promise = TUIUserService.getUserProfile({ userIDList: [this.uid] });
				promise.then((data) => {
				  console.log(data,111);
				});
			},
			change(e) {
				uni.showLoading({
					title: '加载中',
					mask:true
				});

				//对应的状态
				this.$api.default.request('user/setUserRolue',{type:e}).then((res) => {
					uni.hideLoading();
					
					
				})
				
			},
			// 弹框
			open() {

			},
			close() {
				this.show = false
			},
			// 字数
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.userInfo.writer_user_config.word_count = this.array[e.detail.value]
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		.no_border{
			border-radius: 0em !important;
		};
		
		padding-top: 20rpx;
		.baibox {
			// background-color: #FFFFFF;
			padding: 0 38rpx;
			margin-bottom: 20rpx;
			
			.baili:last-child {
				border-bottom: none;
			}
			.right{
				width: 70%;
				text-align: right;
				margin-right: 20rpx;
				font-size: 12px;
			}

			.baili {
				background-color: #FFFFFF;
				border-radius: 0.3em;
				padding-left: 10px;
				padding-right:10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				.zhan1{
					.jipic{
						width: 41px;
						height:19px;
						margin-top: 8px;
						margin-left: 16rpx;;
						float: left;
					}
					
					.art{
						width: 70rpx;
						height:70rpx;
						float: left;
						border-radius: 25em;
						
					}
					.biepic{
						width: 41px;
						height:19px;
						margin-left: 4px;
						float: left;
						margin-top: 8px;
						
					}
					
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					.bnt{
						color: #000;
						font-size: 26rpx;
						font-weight: 500;
						float: left;
						margin-left: 10rpx;
						margin-top: 16rpx;
						overflow: hidden;
						white-space: nowrap; /* 防止文字换行 */
						text-overflow: ellipsis; /* 超出部分显示省略号 */
						
					}	
					span{
						color: red;
						margin-left: 7rpx
					};
					&:last-frist(){
						
					}
				}
				.zhan {
					&:last-child{
						color: red;
						text-align: center;
						width: 100%;
					}
					.jipic{
						width: 41px;
						height:19px;
					}
					.art{
						width: 70rpx;
						height:70rpx;
						float: left;
						border-radius: 25em;
					}
					.biepic{
						width: 41px;
						height:19px;
						margin-left: 4px;
						float: left;
					}
					
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					.bnt{
						color: #999;
						font-size: 11px;
						font-weight: 500;
						float: left;
					}	
					span{
						color: red;
						margin-left: 7rpx
					};
					&:last-frist(){
						
					}
				}

				.left {
					flex-shrink: 0;

					.title {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						padding-bottom: 10rpx;
						.bnt{
							color: #999;
							font-size: 11px;
							font-weight: 500;
						}
					}

					.txt {
						font-size: 24rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}

				.centxt {
					font-size: 28rpx;
					font-weight: normal;
					text-align: right;
					letter-spacing: 0em;
					color: #999999;
					width: 440rpx;
				}

				.cenbox {
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 0 16rpx;

					.headpic {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.centxt {
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #999999;
						width: 440rpx;
					}

					.qianbox {
						text-align: right;
						width: 450rpx;
						white-space: nowrap;

						.qli {
							background: rgba(153, 153, 153, 0.102);
							padding: 2px 8px 2px 6px;
							border-radius: 89px;
							font-family: 思源黑体;
							font-size: 12px;
							// font-weight: bold;
							color: #999;
							display: inline-block;
						}

						.qli:not(:first-child) {
							margin-left: 16rpx;
						}
					}
				}

				.rarr {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}
		
		.baibox-n{
			margin: 0 40rpx;
			padding: 0 20rpx;
			background-color: #fff;
			border-radius: 8px;
			
			.baili{
				border-radius: 0;
				padding-left: 0;
				padding-right: 0;
			}
		}

		.ti {
			margin: 0 auto;
			opacity: 1;
			font-size: 22rpx;
			text-align: center;
			letter-spacing: 0em;
			color: #45CEB9;
			margin-top: 30px;
		}

		.mask {
			background-color: #FFFFFF;
			width: 500rpx;
			border-radius: 10px;
			padding: 30rpx;

			.jatitle {
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}

			.japut {
				border-bottom: 1px solid #f2f2f2;
				font-size: 24rpx;
				color: #3D3D3D;
				padding-bottom: 15rpx;
				margin-bottom: 30rpx;
			}

			.qubox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quli {
					border-radius: 8px;
					border: 1px solid #eeeeee;
					font-size: 24rpx;
					color: #999999;
					width: 220rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
				}

				.que {
					border-radius: 8px;
					border: 1px solid #45C4B0;
					background-color: #45C4B0;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					width: 220rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
	
	.mask {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding: 20rpx 30rpx;
	
		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
	
		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
	
		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	
			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
	
			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
</style>